import { useState, useCallback, useEffect, useRef } from "react";
import { useDispatch } from "react-redux";
import { useNavigate } from 'react-router-dom';
import CompanyService from "../../app/services/companyService";
import { showNotification } from "../common/headerSlice";
import Pagination from "../../components/Pagination";
import PencilIcon from "@heroicons/react/24/outline/PencilIcon";
import CommonService from "../../app/services/commonService";
import PlusIcon from "@heroicons/react/24/outline/PlusIcon";

import TitleCard from "../../components/Cards/TitleCard";
import { NotificationManager } from "react-notifications";

import MagnifyingGlassIcon from "@heroicons/react/24/outline/MagnifyingGlassIcon";
import CompanyUserService from "../../app/services/companyUserService";
import { EyeIcon } from "@heroicons/react/24/outline";
import UnivFilters from "../../app/const/const";

import _ from "lodash";
import UniversityService from "../../app/services/universityService";
import UniversityDetailView from "./components/universityDetail";

function UniversityList() {
    const dispatch = useDispatch();
    const navigate = useNavigate();

    const divRef = useRef(null);

    const pageSizeRange = [10, 20, 30, 40]

    const [data, setData] = useState([]);
    const [total, setTotal] = useState(0);
    const [queryParams, setQueryParams] = useState({
        pageIndex: 1,
        pageSize: 10,
        universityName: '',
        startScore: '',
        endScore: '',
        startRank: '',
        endRank: '',
        category: '',
        attr: '',
        type: '',
        province: '',
        examineType: '理科',
    });

    const [selectUniversityId, setSelectUniversityId] = useState('')

    const fetchData = useCallback(() => {
        loadData()

    }, [queryParams.pageIndex, queryParams.pageSize]);

    useEffect(() => {
        fetchData();
    }, [queryParams.pageIndex, queryParams.pageSize])

    const onPageChange = (pageIndex) => {
        console.log(pageIndex)
        setQueryParams({ ...queryParams, pageIndex: pageIndex });
    }

    const onPageSizeChange = (pageSize) => {
        setQueryParams({ ...queryParams, pageSize: pageSize, pageIndex: 1 });
    }

    const changeQueryParams = (key, e) => {
        const itemStr = `{ "${key}" : "${e.target.value}" }`
        const item = JSON.parse(itemStr)
        setQueryParams({ ...queryParams, ...item, pageIndex: 1 });
    }

    const loadData = () => {
        CommonService.setLoading(true);
        console.log(JSON.stringify(queryParams))
        UniversityService.enrollInfosByParams(queryParams).then((res) => {
            console.log(res)
            if (res.data) {
                setData(res.data)
                setTotal(res.total)
            }
        }).finally(() => {
            CommonService.setLoading(false);
        })
    }

    const onSearchingData = () => {
        loadData();
    }

    const reset = () => {
        setQueryParams({
            pageIndex: 1,
            pageSize: 10,
            universityName: '',
            startScore: '',
            endScore: '',
            startRank: '',
            endRank: '',
            category: '',
            attr: '',
            type: '',
            province: '',
            examineType: '理科',
        });
        loadData();
    }

    const showUniversityDetail = (id) => {
        setSelectUniversityId(id)
        divRef.current.showModal()
    }


    return (
        <>
            <dialog className={`modal`} ref={divRef}>
                <div className="modal-box w-full max-w-5xl ">
                    <UniversityDetailView id={selectUniversityId} />
                    <div className="modal-action">
                        <form method="dialog">
                            <button className="btn">关闭</button>
                        </form>
                    </div>
                </div>
            </dialog>
            <div className="w-full p-4 card  bg-base-100">
                <div tabIndex={0} className="collapse collapse-arrow border border-base-300 bg-base-200">
                    <input type="checkbox" />
                    <div className="collapse-title text-xl font-medium">
                        查询条件
                    </div>
                    <div className="collapse-content">
                        <div className="flex flex-col ">
                            <div className="flex flex-row items-baseline justify-start my-1">
                                <div className="flex flex-row items-baseline justify-start mx-2">
                                    <div className="text-sm font-semibold">院校名称</div>
                                    <input type="text" className="input input-bordered w-60  mx-2 input-sm " value={queryParams.universityName} onChange={(e) => changeQueryParams('universityName', e)} />
                                </div>
                                <div className="flex flex-row items-baseline justify-start mx-2">
                                    <div className="text-sm font-semibold">开始分数</div>
                                    <input type="number" className="input input-bordered w-60  mx-2 input-sm " value={queryParams.startScore} onChange={(e) => changeQueryParams('startScore', e)} />
                                </div>
                                <div className="flex flex-row items-baseline justify-start mx-2">
                                    <div className="text-sm font-semibold">结束分数</div>
                                    <input type="number" className="input input-bordered w-60  mx-2 input-sm " value={queryParams.endScore} onChange={(e) => changeQueryParams('endScore', e)} />
                                </div>
                            </div>
                            <div className="flex flex-row items-baseline justify-start my-1">
                                <div className="flex flex-row items-baseline justify-start mx-2">
                                    <div className="text-sm font-semibold">开始位次</div>
                                    <input type="number" className="input input-bordered w-60  mx-2 input-sm " value={queryParams.startRank} onChange={(e) => changeQueryParams('startRank', e)} />
                                </div>
                                <div className="flex flex-row items-baseline justify-start mx-2">
                                    <div className="text-sm font-semibold">结束位次</div>
                                    <input type="number" className="input input-bordered w-60  mx-2 input-sm " value={queryParams.endRank} onChange={(e) => changeQueryParams('endRank', e)} />
                                </div>
                                <div className="flex flex-row items-baseline justify-start mx-2" >
                                    <div className="text-sm font-semibold">院校分类</div>
                                    <select className="select select-bordered w-60 mx-2  select-sm" value={queryParams.category} onChange={(e) => changeQueryParams('category', e)}>
                                        <option value='' >全部</option>
                                        {UnivFilters.UniversityCategory.map((item, index) => {
                                            return <option key={index} value={item} >{item}</option>
                                        })
                                        }
                                    </select>
                                </div>
                            </div>
                            <div className="flex flex-row items-baseline justify-start my-1">
                                <div className="flex flex-row items-baseline justify-start mx-2" >
                                    <div className="text-sm font-semibold">办学类型</div>
                                    <select className="select select-bordered w-60 mx-2  select-sm" value={queryParams.type} onChange={(e) => changeQueryParams('type', e)}>
                                        <option value='' >全部</option>
                                        {UnivFilters.UniversityType.map((item, index) => {
                                            return <option key={index} value={item} >{item}</option>
                                        })
                                        }
                                    </select>
                                </div>
                                <div className="flex flex-row items-baseline justify-start mx-2" >
                                    <div className="text-sm font-semibold">院校属性</div>
                                    <select className="select select-bordered w-60 mx-2  select-sm" value={queryParams.attr} onChange={(e) => changeQueryParams('attr', e)}>
                                        <option value='' >全部</option>
                                        {UnivFilters.UniversityAttr.map((item, index) => {
                                            return <option key={index} value={item} >{item}</option>
                                        })
                                        }
                                    </select>
                                </div>
                                <div className="flex flex-row items-baseline justify-start mx-2" >
                                    <div className="text-sm font-semibold">考试科目</div>
                                    <select className="select select-bordered w-60 mx-2  select-sm" value={queryParams.examineType} onChange={(e) => changeQueryParams('examineType', e)}>
                                        <option value='' >全部</option>
                                        {UnivFilters.ExamineType.map((item, index) => {
                                            return <option key={index} value={item} >{item}</option>
                                        })
                                        }
                                    </select>
                                </div>
                            </div>
                            <div className="flex flex-row items-baseline justify-between my-1">
                                <div className="flex flex-row items-baseline justify-start mx-2" >
                                    <div className="text-sm font-semibold">院校区域</div>
                                    <select className="select select-bordered w-60 mx-2  select-sm" value={queryParams.province} onChange={(e) => changeQueryParams('province', e)}>
                                        <option value='' >全部</option>
                                        {UnivFilters.ProvinceItems.map((item, index) => {
                                            return <option key={index} value={item} >{item}</option>
                                        })
                                        }
                                    </select>
                                </div>
                                <div className="flex flex-row items-baseline justify-start mx-2">
                                    <button className="btn btn-sm bg-secondary text-white" onClick={reset}><MagnifyingGlassIcon className="w-4 h-4" />重置</button>
                                    <button className="btn btn-sm bg-primary text-white" onClick={onSearchingData}><MagnifyingGlassIcon className="w-4 h-4" />查询</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="flex flex-col">
                <TitleCard title="高校招生信息" topMargin="mt-2" >
                    <table className="table table-zebra bg-base-100 rounded-sm  border-1">
                        <thead>
                            <tr className=" border-b-2 border-base-100">
                                <th className=" text-center">序号</th>
                                <th className=" text-center">院校名称</th>
                                <th className=" text-center">分类</th>
                                <th className=" text-center">类型</th>
                                <th className=" text-center">属性</th>
                                <th className=" text-center">批次</th>
                                <th className=" text-center">投档类型</th>
                                <th className=" text-center">科目</th>
                                <th className=" text-center">最低分位次</th>
                                <th className=" text-center">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {data && data.length > 0 ? (
                                data.map((item, index) => {
                                    return (
                                        <tr key={index}>
                                            <th className=" text-center">{item.index}</th>
                                            <td className=" text-center">{item.universityName}</td>
                                            <td className=" text-center">{item.category}</td>
                                            <td className=" text-center">{item.type}</td>
                                            <td className=" text-center">{item.tags}</td>
                                            <td className=" text-center">{item.batch}</td>
                                            <td className=" text-center">{item.submtiType}</td>
                                            <td className=" text-center">{item.examineType}</td>
                                            <td className=" text-center">{item.score}分/{item.queryRank}位</td>
                                            <td className=" text-center">
                                                <div className="flex flex-row items-center justify-around ">
                                                    <button className="btn btn-sm text-green-500 btn-link" onClick={() => showUniversityDetail(item.universityId)}><EyeIcon className="w-4 h-4" />查看</button>
                                                </div>
                                            </td>
                                        </tr>
                                    );
                                })
                            ) : (
                                <tr>
                                    <td colSpan="7">暂无数据</td>
                                </tr>
                            )}
                        </tbody>
                    </table>
                    <div className="flex flex-row items-center justify-center">
                        <Pagination currentPage={queryParams.pageIndex} totalCount={total} pageSizeList={pageSizeRange} onPageChange={onPageChange} onPageSizeChange={onPageSizeChange} />
                    </div>
                    <div className="flex flex-col items-start justify-between text-xs my-2 p-2 bg-base-300 rounded-md" style={{ lineHeight: '20px' }}>
                        <p>2023年各个院校在江西省招生数据信息</p>
                    </div>
                </TitleCard>
            </div>
        </>
    );
}

export default UniversityList;
